<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增账号 </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="getActions(record)"
          />
        </template>
        <template v-if="column.key === 'clazzName'">
          <div style="width: 100%; cursor: pointer" @click="openUserModal(record)">{{
            record.clazzName
          }}</div>
        </template>
      </template>
    </BasicTable>
    <FormModal @register="register" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { listApi, upApi, detailApi,upPassWordApi } from '@/api/sys/user';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();

  import { ref } from 'vue';

  import FormModal from './FormModal.vue';

  import { columns, searchFormSchema } from './role.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useModal } from '@/components/Modal';
  import util from "@/utils/util";

  defineOptions({ name: 'userList' });
  const { createMessage } = useMessage();

  const [register, { openModal, closeModal }] = useModal();
  const userModal = useModal();

  const [registerTable, { reload }] = useTable({
    title: '账号列表',
    api: listApi,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    actionColumn: {
      width: 150,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
  });

  function handleCreate() {
    openModal(true, {
      isUpdate: false,
    });
  }

  function handleEdit(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
    });
  }

  function handleUp(record: Recordable) {
   upApi(record).then(res=>{
     reload();
     createMessage.success(`已成功启用`);

   })
  }
  function handleDown(record: Recordable) {
    downApi(record).then(res=>{
      reload();
      createMessage.success(`已成功禁用`);
    })
  }

  function handleDelete(record: Recordable) {
    //console.log(record);

    // categoryDeleteApi(record)
    //   .then((res) => {
    //     createMessage.success(res.message);
    //   })
    //   .catch((res) => {
    //     createMessage.error(res.message);
    //   })
    //   .finally(() => {
    //     reload();
    //   });
  }

  function handleSuccess() {
    reload();
  }

  function getActions(record) {
    let arr = [];
    let roleList = userStore.getUserInfo?.roleList;
    let userName = userStore.getUserInfo?.userName;
    let isManage=false;
    if(util.isNotEmpty(roleList)){
      if(roleList[0]=="manage"){
        isManage=true
      }
    }

    let status_arr = [
      {
        label: '启用',
        color: 'success',
        popConfirm: {
          title: '是否启用？',
          confirm: handleUp.bind( record),
        },
        ifShow: (_action) => {
          return record.state === 0; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
        },
      },
      {
        label: '禁用',
        color: 'error',
        popConfirm: {
          title: '是否禁用？',
          confirm: handleDown.bind( record),
        },
        ifShow: () => {
          return record.state === 1; // 根据业务控制是否显示: enable状态的显示禁用按钮
        },
      },
    ];
    if (isManage) {
      arr.push({
        // icon: 'clarity:note-edit-line',
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      });
      // arr.push(
      //   {
      //     // icon: 'ant-design:delete-outlined',
      //     label:'删除',
      //     color: 'error',
      //     popConfirm: {
      //       title: '是否确认删除？',
      //       placement: 'left',
      //       confirm: handleDelete.bind(null, record),
      //     },
      //   })
    }
    if(record.userName!="manage"){
      arr.push(...status_arr);
    }
    return arr;
  }


  function getDropDownActions(record){
    let roleList = userStore.getUserInfo?.roleList;
    let isManage=false;
    if(util.isNotEmpty(roleList)){
      if(roleList[0]=="manage"){
        isManage=true
      }
    }

    let arr = [
      {
        label: '启用',
        popConfirm: {
          title: '是否启用？',
          confirm: handleOpen.bind(null, record),
        },
        ifShow: (_action) => {
          return record.status !== 0; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
        },
      },
      {
        label: '禁用',
        popConfirm: {
          title: '是否禁用？',
          confirm: handleOpen.bind(null, record),
        },
        ifShow: () => {
          return record.status === 1; // 根据业务控制是否显示: enable状态的显示禁用按钮
        },
      },
    ];

    return arr;
  }


</script>
